<template>
	<div class="card-wrapper" v-loading="loading">
		<div class="card-top-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
				<el-breadcrumb-item>特殊水卡</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/applylist' }">水卡开卡记录</el-breadcrumb-item>
				<el-breadcrumb-item>水卡年审/月审</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="card-user-wrapper">
			<div class="header-title">
				<el-icon class="el-icon-c-scale-to-original"></el-icon>
				<span>查找水卡</span>
			</div>
			<div class="search-wrapper">
				<el-input size="medium" v-model="card_number" class='mr-15' placeholder="请输入水卡号"></el-input>
				<el-button size="medium" icon="el-icon-search" type="default" @click="search">搜索</el-button>
			</div>
		</div>

		<div class="card-user-wrapper" v-if="card.full_name || card.c_type || card.paper_type || card.IDcard">
			<div class="header-title">
				<el-icon class="el-icon-postcard"></el-icon>
				<span>用户信息</span>
			</div>
			<div class="base-user">
				<div class="user-row">
					<span>姓名：{{card.full_name || '--'}}</span>
					<span>水卡类型：{{card.c_type || '未知'}}</span>
					<span>证件类型：{{card.paper_type || '--'}}</span>
					<span>证件号码：{{card.IDcard || '--'}}</span>
				</div>
				<div class="user-row">
					<span>手机号码：{{card.tel || '--'}}</span>
					<span>园区名称：{{card.village_name || '--'}}</span>
					<span>地址：{{card.address || '--'}}{{card.address_two}}</span>
				</div>
			</div>
		</div>
		<div class="card-user-wrapper" v-if="card.audit_data.length>0">
			<div class="header-title">
				<el-icon class="el-icon-picture"></el-icon>
				<span>证件照片</span>
			</div>
			<div class="card-info">
				<el-image :preview-src-list="card.audit_data" lazy class="user-pic mr-15" :src="card.audit_data[0]" fit="cover">
				</el-image>
				<el-image :preview-src-list="card.audit_data" lazy class="user-pic" v-if="card.audit_data.length==2"
					:src="card.audit_data[1]" fit="cover"></el-image>
			</div>
		</div>
		<div v-if="w_a_id && w_a_id" class="btn-wrapper">
			<el-button icon="el-icon-check" @click="auditCard" type="primary" class="audit-btn">通过审核</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'cardlimited',
		data: function () {
			return {
				loading: false,
				card_number: "",
				w_id: "",
				w_a_id: "",
				card: {
					audit_data: []
				},//水卡信息
			}
		},

		inject: ['reload'],
		methods: {

			auditCard() {
				this.$msgbox({
					title: '提示',
					message: '是否通过本次审核？',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					this.$post({
						url: 'Partner/WaterCard/submitLimited',
						data: {
							w_id: this.w_id,
							w_a_id: this.w_a_id,
							card_sn: this.card_number
						},
						success: (data) => {
							if (data.code == 1000) {
								this.$message.success("审核成功");
								let card_number = this.$route.query.card_number;
								if (card_number) {
									setTimeout(() => {
										this.$router.push({ path: '/applylist' });
									}, 1500)
								} else {
									this.card_number = "";
									this.w_id = "";
									this.w_a_id = "";
									this.card = {
										audit_data: []
									}
								}
							} else {
								this.$message.error(data.message);
							}
						}, error: e => {
							this.$message.error("网络错误")
						}
					})
				});
			},

			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			search() {
				let card_number = this.card_number;
				if (card_number == "") {
					this.$message.error("请输入水卡号"); return;
				}
				this.applyInfo(card_number);
			},

			applyInfo(card_number) {
				this.loading = true;
				this.$post({
					url: 'Partner/WaterCard/getLimitedWaterCard',
					data: {
						sn: card_number
					},
					success: res => {
						this.loading = false;
						if (res.code > 0) {
							this.card = res.data;
							this.card_number = res.data.limited[0].card_sn;
							this.w_id = res.data.limited[0].w_id;
							this.w_a_id = res.data.limited[0].w_a_id;
						} else {
							this.$message.error(res.message);
						}
					}, error: e => {
						this.loading = false;
						this.$message.error("网络错误");
					}
				})
			}
		},
		mounted() {
			let card_number = this.$route.query.card_number;
			if (card_number) {
				this.applyInfo(card_number);
			}
		},
		watch: {

		}
	}
</script>

<style scoped>
	.card-wrapper {
		background: #FAFAFA;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.card-top-wrapper {
		background: #fff;
		height: 50px;
		display: flex;
		align-items: center;
		padding-left: 22px;
		position: relative;
	}



	.header-title {
		color: #2C5585;
		padding: 20px 0 10px 18px;
		position: relative;
	}

	.header-title span {
		display: inline-block;
	}

	.header-title::after {
		position: absolute;
		content: "";
		width: 95%;
		border-bottom: 1px dotted #F2F2F2;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.card-user-wrapper {
		background: #fff;
		margin-top: 15px;
	}

	.search-wrapper {
		padding: 15px 30px 20px;
		display: flex;
		width: 400px;
	}

	.base-user {
		padding: 10px 30px 30px 30px;
		color: #4C4C4C;
		font-size: 14px;
	}

	.user-row {
		display: flex;
		margin-top: 20px;
	}

	.user-row span {
		display: inline;
		min-width: 22%;
		margin-right: 20px;
	}


	.user-pic-group {
		display: flex;
	}

	.user-pic {
		width: 240px;
		height: 200px;
	}

	.mr-15 {
		margin-right: 15px;
	}

	.card-info {
		display: flex;
		padding: 30px;
		color: #4C4C4C;
		font-size: 14px;
	}

	.card-info span {
		flex: 1;
		text-align: left;
	}

	.btn-wrapper {
		background: #fff;
		padding: 20px 30px;
		margin-top: 10px;
	}

	.audit-btn {
		background: #2C5586;
	}
	.audit-btn:hover{
		color: #fff;
	}
</style>